import {Button, Form, Input, Space, Switch, Tag,} from 'antd';
import '../user.less'
import {getUserInfoById} from '../../../../api/admin/user.js'
import {useEffect, useState} from "react";

import {useLocation} from 'react-router-dom'


const layout = {
    labelCol: {
        span: 5,
    }, wrapperCol: {
        span: 19,
    },
};
const tailLayout = {
    wrapperCol: {
        // offset: 4,
        span: 24,
    },
};

const Detail = () => {
    const {state} = useLocation()

    const [form, setForm] = useState({})

    useEffect(() => {
        if (state) {
            getUserInfoByIdList()
        }
    }, [])

    const getUserInfoByIdList = () => {
        // console.log(state.id,'id')
        getUserInfoById(state.id)
            .then(res => {
                const {data, code} = res
                if (code === 200) {
                    setForm(data)
                }
            })
            .catch(err => {
                console.log(err, 'err')
            })
    }
    return (<>
        <div className="title"> 用户详情</div>
        <div className="content">
            <Form
                {...layout}
                name="control-hooks"
                style={{
                    width: 500,
                }}
            >
                <Form.Item
                    name="username"
                    label="用户名"
                >
                    {form.username}
                </Form.Item>
                <Form.Item
                    name="nickname"
                    label="昵称"
                >
                    {form.nickName}
                </Form.Item>
                <Form.Item
                    name="email"
                    label="邮箱号码"
                >
                    {form.email}
                </Form.Item>
                <Form.Item
                    name="phoneNumber"
                    label="手机号码"
                >
                    {form.phoneNumber}
                </Form.Item>
                <Form.Item
                    name="isAdmin"
                    label="是否管理员"
                >
                    {form.isAdmin ? <Tag color="gold">超级管理员</Tag> : <Tag>普通用户</Tag>}
                </Form.Item>
            </Form>
        </div>
    </>)
}

export default Detail